<template>
  <div class="design-resume-box">
    <!--     导航栏 -->
    <designer-resume-navbar @reset="reset"></designer-resume-navbar>
    <div :key="resetKey" class="bottom-box">
      <!-- 数据配置 -->
      <div v-loading="isLoading" class="left">
        <data-config v-if="HJNewJsonStore.componentsTree.length"></data-config>
        <!-- 暂无数据 -->
        <div v-else class="no-data-box">
          <no-data-vue></no-data-vue>
        </div>
      </div>
      <!-- 简历预览 -->
      <div id="resume-container" class="right">
        <!-- 主题配置 -->
        <global-theme-setting-bar></global-theme-setting-bar>
        <div v-loading="isLoading" class="resume-container" :style="{ zoom: zoomScale }">
          <resume-render :is-loading="isLoading"></resume-render>
        </div>
      </div>
      <!-- 操作列 -->
      <div class="page-eidtor-box">
        <page-editor-list></page-editor-list>
      </div>
    </div>

    <!-- 导出pdf进度弹窗 -->
    <process-bar-dialog
        :dialog-visible="dialogVisible"
        :percentage-num="percentage"
        @cancle="cancleProgress"
    ></process-bar-dialog>
  </div>
</template>

<script lang="ts" setup>
import DataConfig from '../createTemplate/designer/components/DataConfig.vue';
import appStore from '@/store';
import {storeToRefs} from 'pinia';
import {closeGlobalLoading, getUuid, HideNavbar, openGlobalLoading} from '@/utils/common';
import {useRoute} from 'vue-router';
import ResumeRender from '../createTemplate/designer/components/ResumeRender.vue';
import PageEditorList from './components/PageEditorList.vue';
import GlobalThemeSettingBar from '../createTemplate/designer/components/GlobalThemeSettingBar.vue';
import NoDataVue from '@/components/NoData/NoData.vue';
import {ElMessage} from "element-plus";
import DesignerResumeNavbar from "@/components/common/DesignerResumeNavbar.vue";
import {getResumeById, getResumeJsonById, getTemplateById} from "@/http/m_api/template";
import router from "@/router";

const isLoading = ref(true);
const {HJNewJsonStore, templateBase, selectedModuleId, resumeId} = storeToRefs(
    appStore.useCreateTemplateStore
);
const {resetResumeJson} = appStore.useCreateTemplateStore
const {resetSelectModel} = appStore.useSelectMaterialStore;

const route = useRoute();

// 响应式缩放比例
const zoomScale = ref(1);
const adjustZoomScale = () => {
  const rightBox = document.getElementById('resume-container') as HTMLElement;
  const fixedWidth = 820; // ResumeRender 的固定宽度
  if (rightBox) {
    // 获取容器宽度，减去左右 padding 的宽度
    const styles = window.getComputedStyle(rightBox);
    const paddingLeft = parseFloat(styles.paddingLeft || '0');
    const paddingRight = parseFloat(styles.paddingRight || '0');

    const availableWidth = rightBox.clientWidth - paddingLeft - paddingRight - 90; // 可用宽度
    zoomScale.value = availableWidth / fixedWidth; // 计算缩放比例
    if (zoomScale.value > 1) zoomScale.value = 1; // 限制最大比例为 1
  }
};


const {resetKey} = storeToRefs(appStore.useCreateTemplateStore);
const reset = () => {
  resetKey.value++; // 增加key，强制重新渲染
};


// 初始化和窗口变化事件绑定
onMounted(async () => {
  adjustZoomScale();
  window.addEventListener('resize', adjustZoomScale);
});

const checkData = async ()=>{
  HideNavbar()
  if (!templateBase.value) {
    // 读取模板和简历信息
    openGlobalLoading()
    selectedModuleId.value = ''; // 重置选中模块
    resetResumeJson(); // 重置json数据
    resetSelectModel(); // 重置选中模块

    const resumeDataResponse = await getResumeById(route.params.id);
    const resumeJsonResponse = await getResumeJsonById(route.params.id)
    // 检查每个请求的状态
    if (resumeDataResponse.data && resumeJsonResponse.data.templateJson !== '') {
      const template_base = await getTemplateById(resumeDataResponse.data.templateId)
      if (template_base.code === 0) {
        templateBase.value = template_base.data;
        HJNewJsonStore.value = JSON.parse(resumeJsonResponse.data.templateJson);
        resumeId.value = route.params.id as number
        nextTick(() => {
          closeGlobalLoading()
          isLoading.value = false;
        })
      } else {
        ElMessage({type: "error", message: '加载失败，简历可能不属于你'})
        closeGlobalLoading()
        router.push('/')
      }
    } else {
      ElMessage({type: "error", message: '加载失败，简历可能不属于你'})
      closeGlobalLoading()
      router.push('/')
    }
  }
  else {
    closeGlobalLoading()
    isLoading.value = false;
  }
}

checkData();

onBeforeUnmount(() => {
  window.removeEventListener('resize', adjustZoomScale);
});

// 生成pdf方法
const dialogVisible = ref<boolean>(false);
const percentage = ref<number>(10);

// 关闭进度弹窗
const cancleProgress = () => {
  dialogVisible.value = false;
  percentage.value = 10;
};
</script>

<style lang="scss" scoped>
.design-resume-box {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-y: hidden;
  white-space: pre-line;

  .bottom-box {
    width: 100%;
    flex: 1;
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
    overflow-x: auto;
    // background-image: linear-gradient(to right, rgb(203 213 225) 1px, transparent 1px),
    //   linear-gradient(to bottom, rgb(203 213 225) 1px, transparent 1px);
    // background-size: 10px 10px;
    // background-position: center center;
    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);

    .left {
      flex: 0 0 40%; // 固定宽度占比
      max-width: 40%; // 防止超出
      min-width: 450px; // 设置最小宽度（可以根据需求调整）
      background: #fff;

      .no-data-box {
        height: 100%;
        display: flex;
        align-items: center;
      }

      .no-data {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #fff;

        p {
          font-size: 16px;
          letter-spacing: 1px;
          color: #2cbd99;
        }

        :deep(img) {
          width: 40%;
          height: auto;
        }
      }
    }

    .right {
      flex: 1; // 动态占据剩余空间
      min-width: 500px; // 设置最小宽度
      overflow-x: hidden;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 20px;
      position: relative;

      .resume-container {
        margin-top: 20px;
        width: 820px; // 固定宽度
        height: auto;
        z-index: 1;
      }
    }

    .page-eidtor-box {
      width: 60px;
      min-height: 300px;
      position: absolute;
      right: 15px;
      top: 130px;
    }
  }

  :deep(.full-screen) {
    display: none;

    .el-drawer__body {
      overflow: hidden;
    }
  }
}
</style>
